$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;

  .banner {
    width: 100%;
    position: relative;

    .bg {
      img {
        width: 100%;
        display: block;
        object-fit: cover;
      }
    }

    .t {
      position: absolute;
      left: 50%;
      top: 45%;
      transform: translate(-50%, -50%);
      color: #FFF;
      font-size: $fontSize_54;
      font-weight: 700;
    }

    .add {
      position: absolute;
      left: 50%;
      bottom: 30%;
      transform: translateX(-50%);
      z-index: 10;
      transition: all 600ms;
      img{
        width: 60/$f+vw;
      }
      &:hover {
        transform:translateX(-50%) rotate(180deg);
      }
    }
  }

  .types {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    align-items: center;

    span {
      width: 1px;
      height: 1.5vw;
      background: #E6E6E6;
    }

    a {
      width: 15vw;
      color: #666;
      font-size: $fontSize_16;
      text-align: center;
      position: relative;
      padding: 1.5vw 0;
      transition: all 600ms;

      &::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 3px;
        background: #79C536;
        transition: all 600ms;
      }

      &:hover {
        color: #79C536;
      }
    }

    .active {
      color: #79C536;

      &::after {
        width: 100%;
      }
    }
  }

  .section1{
    overflow: hidden;
    background: #F6FAF6;
    .wrap{
        width: 1145/$f+vw;
        margin: 5.9vw auto 4.6vw;
        .title{
            margin: 0 0 35/$f+vw;
            h1{
                color: #7DA725;
                font-size: 42/$f+vw;
                font-style: normal;
                font-weight: 500;
                line-height: 24/$f+vw; /* 57.143% */
                margin: 0 0 38/$f+vw;
            }
            p{
                color:  rgba(17, 31, 44, 0.85);
                font-family: "Source Han Sans CN";
                font-size: 16/$f+vw;
                font-style: normal;
                font-weight: 400;
                line-height: 28/$f+vw; /* 175% */
            }
        }
        .content{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .item{
                width: 535/$f+vw;
                display: flex;
                margin: 0 0 35/$f+vw;
                .l{
                    width: 220/$f+vw;
                    margin: 0 10/$f+vw 0 0;
                    h1{
                        color:  #000;
                        font-size: 20/$f+vw;
                        font-style: normal;
                        font-weight: 500;
                        position: relative;
                        width: fit-content;
                        margin: 0 0 27/$f+vw;
                        &::after{
                            content: '';
                            position: absolute;
                            width: 49/$f+vw;
                            height: 3/$f+vw;
                            background: #7DAC2C;
                            bottom: -7/$f+vw;
                            left: 0;
                        }
                    }
                    .text{
                        font-size: 16/$f+vw;
                        color: #666;
                        line-height: 24/$f+vw;
                    }
                }
                .img{
                    width: 304/$f+vw;
                    height: 190/$f+vw;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                        transition: all .6s;
                        &:hover{
                            transform: scale(1.05);
                        }
                    }
                }
            }
        }
    }
  }

  
  .appropriate{
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 229/$f+vw;
    z-index: 1;
    .bg{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .wrap{
      width: 1320/$f+vw;
      display: flex;
      align-items: center;
      position: relative;
      top: 20/$f+vw;
      h1{
        color: #FFF;
        font-size: 32/$f+vw;
        font-style: normal;
        font-weight: 400;
        line-height: 140/$f+vw; /* 437.5% */
        margin: 0 52/$f+vw 0 0;
      }
      .display{
        display: flex;
        align-items: center;
        a{
          text-decoration-line: underline;
        }
        p,a{
          color: #FFF;
          font-family: "PingFang SC";
          font-size: 16/$f+vw;
          font-style: normal;
          font-weight: 400;
          line-height: 140/$f+vw; /* 875% */
        }
      }
    }
  }


  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .banner{
      .bg{
        img{
          height: 300px;
        }
      }
      .t{
        font-size: 20px;
      }
      .add{
        bottom:25%;
        img{
          width:20px;
        }
      }
    }
    .types{
      a{
        width: 30%;
        font-size: 14px;
        padding: 10px 0;
        &::after{
          height: 2px;
        }
      }
      span{
        height: 10px;
      }
    }

    .section1{
      .wrap{
        width: 90%;
        margin: 40px auto;
        .title{
          margin: 0 0 35px;
          h1{
            font-size: 24px;
            line-height: 1;
            margin: 0 0 15px;
          }
          p{
            font-size: 14px;
            line-height: 2;
          }
        }
        .content{
          flex-direction: column;
          .item{
            width: 100%;
            flex-direction: column-reverse;
            align-items: unset;
            margin: 0 0 20px;
            .l{
              width: 100%;
              h1{
                font-size: 18px;
                line-height: 1;
                margin: 0 0 20px;
                &::after{
                  width: 49px;
                  height: 2px;
                  bottom: -10px;
                }
              }
              p{
                font-size: 14px;
                line-height: 2;
              }
            }
            .img{
              width: 100%;
              height: auto;
              margin: 0 0 20px;
            }
          }
        }
      }
    }

    .appropriate{
      height: 180px;
      .wrap{
        width: 90%;
        flex-direction: column;
        align-items: unset;
        h1{
          font-size: 24px;
          line-height: 1;
          margin: 0 0 15px;
        }
        .display{
          p,a{
            font-size: 13px;
          }
        }
      }
    }

  }
}